<template>
  <div class="wrap">
    <div class="recharge-log">
      <div class="header-card">
        <div class="left">
          <div class="avatar">
            <img :src="business.avatar" alt="" class="">
          </div>
          <div class="user">
            <div class="user-text-1">
              Hello，{{business.name}}
            </div>
            <div class="user-text-2">
              感谢您使用{{getAppName()}}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="text1">当前余额（元）：</div>
          <div class="text2">{{ $store.getters.amount }}</div>
          <div class="text3">预计剩余代贴单数：{{ $store.getters.stickerNum}}</div>
        </div>
      </div>
      <div class="recharge-content">
        <div class="recharge-header">
          <div>
            充值记录
            <el-tag style="cursor: pointer" @click="showTable" v-if="false">{{!allTable ? '展开' : '收起'}}</el-tag>
          </div>
          <div>
            <recharge></recharge>
          </div>
        </div>
        <div class="table">
          <el-table
            border
            :data="data"
          >
            <el-table-column
              prop="createTime"
              label="时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="amount"
              label="充值金额（¥）"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="typeStr"
              label="充值方式"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Recharge from "@/layout/components/Recharge/index";
import {getRechargeLog} from "@/api/business";
import {getAppName} from "@/utils/settings";
export default {
  name: "rechargeLog",
  components:{
    Recharge
  },
  computed:{
    data(){
      const data = [];
      this.tableData.forEach(item=>{
        // if(!this.allTable && data.length >= 3){
        //   return
        // }
        data.push(item)
      })
      return data;
    }
  },
  data(){
    return {
      business:{
        avatar: '',
        account: '',
        name: '',
      },
      avatar: '',
      allTable: false,
      tableData:[],
      getAppName
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      this.business.avatar = this.$store.getters.avatar
      this.business.name = this.$store.getters.name
      getRechargeLog().
        then(res=>{
          this.tableData = res.data
      })
    },
    showTable(){
      this.allTable = !this.allTable
    }
  }
}
</script>
<style lang="scss">

</style>

<style scoped lang="scss">

.wrap{
  padding:20px 30px;
  min-height: calc(100vh - 100px);
  background: #fafafb;
  .recharge-log{
    width: 1000px;
    min-height: calc(100vh - 100px);
    padding: 20px 50px;
    background:#ffffff;
  }
}
.header-card{
  width: 100%;
  height: 80px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  .left{
    float: left;
    .avatar{
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      img{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .user{
      font-size: 14px;
      margin-top: 10px;
      margin-left: 20px;
      float: left;
      line-height: 30px;
      .user-text-1{
        font-weight: 500;
      }
    }
  }
  .right{
    float: right;
    height: 100%;
    padding: 5px 10px;
    background: #ff7d0a;
    border-radius: 3px;
    border: 1px solid #ff7d0a;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text1{
      font-weight: 650;
      font-size: 14px;
    }
    .text2{
      font-weight: 700;
      font-size: 19px;
    }
    .text3{
      font-weight: 400;
      font-size: 11px;
    }
  }
}
.recharge-content{
  margin-top: 20px;
  .recharge-header{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
